<template>
  <div>
    <n-alert
      :title="title ? title : type == 'code' ? '代码' : '提示'"
      :type="colorType ? colorType : type == 'code' ? 'info' : 'warning'"
    >
      <template #icon>
        <n-icon>
          <slot name="icon">
            <CodeSlashSharp v-if="type == 'code'" />
            <NotificationsOutline v-else />
          </slot>
        </n-icon>
      </template>
      <slot name="content">
        <n-code :code="text" language="javascript"/>
      </slot>
    </n-alert>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { NotificationsOutline, CodeSlashSharp } from '@vicons/ionicons5'
export default defineComponent({
  components: {
    NotificationsOutline,
    CodeSlashSharp
  },
  props: {
    text: {
      type: String
    },
    title: {
      type: String
    },
    colorType: {
      type: String
    },
    type: {
      type: String,
      // code || tip
      default: 'code'
    }
  }
})
</script>
